<template>
  <div>
    <form-box headText="请购单明细">
      <el-button
        slot="btn"
        size="small"
        @click.native="showAddLineBox">增加明细</el-button>

      <el-collapse v-model="lineVal" @change="handleLineChange" accordion>
        <el-collapse-item v-for="(item, index) in reqData.head_info.line_list"
                          :key="index"
                          :title="item.mat_desc"
                          :name="index"
                          @click.native="" >
          <el-form label-width="100px" inline>

            <el-form-item label="物料名称" label-width="100px">
              <el-input v-model="item.mat_desc"></el-input>
            </el-form-item>

            <el-form-item label="规格型号" label-width="100px">
              <el-input v-model="item.mat_model"></el-input>
            </el-form-item>

            <el-form-item label="数量" label-width="100px">
              <el-input v-model="item.quantity"></el-input>
            </el-form-item>

            <el-form-item label="单位" label-width="100px">
              <el-input v-model="item.unit"></el-input>
            </el-form-item>

            <el-form-item label="重量" label-width="100px">
              <el-input v-model="item.weight"></el-input>
            </el-form-item>

            <el-form-item label="单价" label-width="100px">
              <el-input v-model="item.up"></el-input>
            </el-form-item>

            <el-form-item label="金额" label-width="100px">
              <el-input v-model="item.price"></el-input>
            </el-form-item>

            <el-form-item label="交货日期" label-width="100px">
              <el-input v-model="item.require_date"></el-input>
            </el-form-item>

            <el-form-item label="备注" label-width="100px">
              <el-input v-model="item.remark"></el-input>
            </el-form-item>
          </el-form>

        </el-collapse-item>
      </el-collapse>
    </form-box>

    <el-dialog title="增加请购单明细" :visible.sync="isShowAddLine" size="large" top="10%">
      <el-form class="small-space" :model="reqLineData" label-position="right" label-width="90px" :inline="true">

        <el-form-item label="物料名称" label-width="100px" >
          <el-select v-model="reqLineData.mat_desc"
                     clearable
                     filterable
                     remote
                     :remote-method="remoteMethod_matDesc"
                     :loading="matDescSearchLoading"
                     @change="selectMatDescChange"
                     placeholder="物料名称">
            <el-option
              v-for="item in options_search_matDesc"
              :key="item.mat_id"
              :label="item.mat_desc"
              :value="item.mat_id">
            </el-option>
          </el-select>
        </el-form-item>

        <br/>

        <el-form-item label="规格型号" label-width="100px">
          <el-input v-model="reqLineData.mat_model"></el-input>
        </el-form-item>

        <el-form-item label="数量" label-width="100px">
          <el-input v-model="reqLineData.quantity"></el-input>
        </el-form-item>

        <el-form-item label="单位" label-width="100px">
          <el-input v-model="reqLineData.unit"></el-input>
        </el-form-item>

        <el-form-item label="重量" label-width="100px">
          <el-input v-model="reqLineData.weight"></el-input>
        </el-form-item>

        <el-form-item label="单价" label-width="100px">
          <el-input v-model="reqLineData.up"></el-input>
        </el-form-item>

        <el-form-item label="金额" label-width="100px">
          <el-input v-model="reqLineData.price"></el-input>
        </el-form-item>

        <el-form-item label="交货日期" label-width="100px">
          <el-input v-model="reqLineData.require_date"></el-input>
        </el-form-item>

        <el-form-item label="备注" label-width="100px">
          <el-input v-model="reqLineData.remark"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowAddLine = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddLine">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import formBox from '../../../components/formBox'
  import { serachMatName } from '@/api/purchase/request'

  export default {
    name:'createReqDetail',
    components:{
      formBox
    },
    props:[
      'reqData'
    ],
    data(){
      return {
        lineVal:'',
        isShowAddLine:false,
        matDescSearchLoading:false,
        reqLineData:{
          line_id:null,
          mat_desc:null,
          mat_id:null,
          mat_model:null,
          mat_no:null,
          mat_type_id:null,
          mat_type_name:null,
          price:null,
          quantity:null,
          remark:null,
          require_date:null,
          unit:null,
          up:null,
          weight:null,
        },
        searchMatDesc:{
          client_type:1,
          mat_desc:''
        },
        options_search_matDesc:[],
      }
    },
    mounted(){

    },
    methods:{
      showAddLineBox(){
        let resetLine = {
          line_id:null,
          mat_desc:null,
          mat_id:null,
          mat_model:null,
          mat_no:null,
          mat_type_id:null,
          mat_type_name:null,
          price:null,
          quantity:null,
          remark:null,
          require_date:null,
          unit:null,
          up:null,
          weight:null,
        }
        this.reqLineData = resetLine
        this.isShowAddLine = true
      },
      confirmAddLine(){
        this.reqData.head_info.line_list.push(this.reqLineData)
        this.isShowAddLine = false
      },
      handleLineChange(){ //折叠面板 是否打开的change事件

      },
      remoteMethod_matDesc(query){  //物料名称搜索 方法
        this.matDescSearchLoading = true;
        this.searchMatDesc.mat_desc = query
        serachMatName(this.searchMatDesc)
          .then(res => {
            setTimeout(() => {
              this.matDescSearchLoading = false;
              this.options_search_matDesc = res.cst_list
            }, 1000 * Math.random());
          })
          .catch(err => {
            this.$message.error('查询失败!');
            console.log(err);
          })
      },
      selectMatDescChange(val){ //物料名称 搜索选框的change事件方法
        if(val !== ''){
          for(let i of this.options_search_matDesc){
            if(i.mat_id == val){
              this.reqLineData.mat_desc = i.mat_desc
              this.reqLineData.mat_id = i.mat_id
              this.reqLineData.mat_no = i.mat_no
              this.reqLineData.mat_type_id = i.mat_type_id
              this.reqLineData.mat_type_name = i.mat_type_name
              this.reqLineData.price = i.price
              this.reqLineData.unit = i.unit
              this.reqLineData.weight = i.weight
            }
          }
        }

      },
    }
  }
</script>
<style scoped lang="scss">

</style>
